<template>
  <el-select v-model="selectValue" :multiple="props.multiple" :placeholder="props.placeholder">
    <el-option
      v-for="item in options"
      :key="item[props.key]"
      :label="item[props.label]"
      :value="item[props.value]"
    />
  </el-select>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { SelectPropsType } from './types'

//接受model双向绑定参数
const selectValue = defineModel<any>()
//获取配置参数
const props = withDefaults(defineProps<SelectPropsType>(), {
  key: 'id',
  value: 'id',
  label: 'name',
  placeholder: '',
  multiple: false
})

const options = ref(props.data ? props.data : [])

//如果设置了api，调用api加载数据
if (props.loadApi) {
  const rs = await props.loadApi(props.loadParams ? props.loadParams : {})
  options.value = rs.data
}
</script>
